<template>
	<view :class="['xihuCard',device == 'ios'?'iosPadding':'androidPadding']">
		<view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view :class="['pageTitle','dFlex','jBetween_aCenter']">
				<view class="backIcon imgPublic" @tap='tool.back()'>
					<image src="../static/images/back.png" mode="widthFix"></image>
				</view>
				<view class="title">洗护卡</view>
				<view class="backIcon imgPublic"></view>
			</view>
		</view>
		<view class="container">
			<view class="bgColor"></view>
			<view class="walletCount">
				<view class="showCount">
					<view class="user dFlex jStart_aCenter">
						<view class="userTx imgPublic">
							<image :src="user.image_head"></image>
						</view>
						<text>{{user.nickName}}</text>
					</view>
					<view class="count">￥{{datas.total?datas.total:'0.00'}}</view>
					<view class="cash dFlex jBetween_aCenter">
						<text>洗护卡总额（元）</text>
						<view class="cashBtn" @tap='jihuo'>去激活</view>
					</view>
				</view>
				<!-- <view class="accumulate dFlex jStart_aCenter">
					<view class="pro dFlex jStart_aCenter">
						<text>洗护卡数量</text>
						<view class="proCount">￥{{datas.total?datas.total:0}}</view>
					</view>
					<view class="pro dFlex jStart_aCenter">
						<text>洗护卡总额</text>
						<view class="proCount">￥{{datas.count?datas.count:'0.00'}}</view>
					</view>
				</view> -->
			</view>
			<view class="changeDetail">
				<view class="menus dFlex jAround_aCenter">
					<view :class="['menuOne',menu=='1'?'active':'']" @tap='changeMenu("1")'>
						<text>激活记录</text>
						<view class="line"></view>
					</view>
					<!-- <view :class="['menuOne',menu=='2'?'active':'']" @tap='changeMenu("2")'>
						<text>消费记录</text>
						<view class="line"></view>
					</view> -->
				</view>
				<view class="list" v-if="list.length">
					<view class="line dFlex jStart_aCenter" v-for="(item,index) in list" :key='index'>
						<view class="lineIcon imgPublic">
							<!-- 收益记录 -->
							<image v-if="menu == '1'" src="https://wx.gdxixiashi.com/public/images/person/icon@2x.png" mode="widthFix"></image>
							<!-- 提现记录 -->
							<image v-if="menu == '2'" src="https://wx.gdxixiashi.com/public/images/person/icon-tixian@2x.png" mode="widthFix"></image>
						</view>
						<view class="lineContent dFlex jBetween_aCenter">
							<view class="lineTit">
								<view class="tit">{{item.content}}</view>
								<view class="time">{{item.use_time}}</view>
							</view>
							<view class="lineVal">￥<text>{{item.amount}}</text></view>
						</view>
					</view>
				</view>
				<view class="list empty imgPublic" v-else>
					<image src="../static/images/empty.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				device: getApp().globalData.platform,
				menu:'1',
				list:[],
				datas:{},
				user:{},
				page:1,
				load:false,
			};
		},
		onLoad() {
			this.initUser();
			this.initList();
		},
		onReachBottom(){
			if(this.load){
				this.load = false;
				this.page++;
				if(this.menu == '1'){
					this.initList();
				}else{
					
				}
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			initList(){
				this.tool.getData('User/cardRecord',{
					memberId:uni.getStorageSync('userId')?uni.getStorageSync('userId'):'',
					page:this.page,
				}).then(res=>{
					console.log(res);
					if(res){
						this.datas = res;
						this.list = this.page == 1?res.list:this.list.concat(res.list);
						this.load = res.list.length>=10?true:false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			initUser(){
				this.tool.getUserInfo().then(res=>{
					this.user = res;
				}).catch(err=>{
					console.log(err);
				})
			},
			// 激活洗户卡
			jihuo(){
				uni.navigateTo({
					url:'/home/xihuCard'
				})
			},
			// 切换菜单
			changeMenu(idx){
				this.menu = idx;
				this.page = 1;
				if(idx == '1'){
					this.initList();
				}else{
					
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: white;
	}
	.xihuCard{
		width: 100%;
		.container{
			width: 100%;
			.changeDetail{
				width: 100%;
				.list{
					width: 100%;
					padding: 0 4%;
					box-sizing: border-box;
					.line{
						width: 100%;
						.lineContent{
							flex: 1;
							padding: 20px 0;
							border-bottom: 1px solid #D8D8D8;
							.lineTit{
								flex: 1;
								.time{
									font-size:12px;
									color: #999999;
									margin-top: 6px;
								}
							}
							.lineVal{
								color: #FF3131;
								font-size: 10px;
								text{
									font-size: 14px;
								}
							}
						}
						.lineIcon{
							width: 34px;
							height:34px;
							margin-right: 10px;
						}
					}
					.line:last-child{
						.lineContent{
							border: none;
						}
					}
				}
				.menus{
					width: 100%;
					padding-top: 12px;
					border-bottom: 1px solid #D8D8D8;
					.menuOne{
						flex: 1;
						text-align: center;
						.line{
							width: 40px;
							height:3px;
							border-radius: 50px;
							margin: 9px auto 0;
							background: none;
						}
					}
					.active{
						color: #1664FF;
						.line{
							background: #1664FF;
						}
					}
				}
			}
			.walletCount{
				position: relative;
				width: 92%;
				top: -100px;
				margin: 0 auto -90px;
				background: #eff5fe;
				border-radius: 5px;
				overflow: hidden;
				box-shadow: 0px 2px 4px 0px rgba(96,159,247,0.05); 
				.accumulate{
					width: 100%;
					padding: 14px;
					box-sizing: border-box;
					.pro{
						flex: 1;
						color: #666666;
						font-size: 12px;
						.proCount{
							color: #1664FF;
							margin-left: 12px;
							font-weight: bold;
						}
					}
				}
				.showCount{
					width: 100%;
					background: white;
					padding: 16px;
					box-sizing: border-box;
					.cash{
						font-size: 12px;
						color: #999999;
						.cashBtn{
							width: max-content;
							color: white;
							background: #1664FF;
							padding: 6px 10px;
							border-radius: 50px ;
						}
					}
					.count{
						width: 100%;
						margin: 16px 0;
						font-size: 18px;
						font-weight: bold;
					}
					.user{
						width: 100%;
						font-size: 16px;
						.userTx{
							width: 28px;
							height: 28px;
							margin-right: 12px;
							image{
								height: 100%;
							}
						}
					}
				}
			}
			.bgColor{
				width: 100%;
				background: linear-gradient(0deg,#609ff8 0%, #0e64ff 100%);
				height: calc(195px - var(--status-bar-height) - 57px);
			}
		}
	}
	.ios_pageTitle,
	.and_pageTitle {
		background: #0e64ff;
		color: white;
	}
</style>